<!DOCTYPE html>
<html>
<head>
	<title>SoundJS: Mobile Safe</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/soundjs.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>
</head>

<body onload="init()">

<header  class="SoundJS">
	<h1>Mobile Safe Play</h1>

	<p>This example registers and plays a sound with SoundJS in a way that will
		work on mobile devices.</p>
</header>

<div class="content" id="content" style="height: auto">
	<p id="status">Hello World.</p>
</div>

<div id="error">
	<h2>Sorry!</h2>

	<p>SoundJS is not currently supported in your browser.</p>

	<p>Please <a href="http://github.com/CreateJS/SoundJS/issues" target="_blank">log a bug</a>
		with the device and browser you are using. Thank you.</p>
</div>

<script type="text/javascript" src="../lib/soundjs-NEXT.combined.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
	http://code.createjs.com -->

<script id="editable">
	var displayMessage;		// the HTML element we use to display messages to the user

	function init() {
		// store this off because walking the DOM to get the reference is expensive
		displayMessage = document.getElementById("status");

		// if this is on mobile, sounds need to be played inside of a touch event
		if (createjs.BrowserDetect.isIOS || createjs.BrowserDetect.isAndroid || createjs.BrowserDetect.isBlackberry || createjs.BrowserDetect.isWindowPhone) {
			//document.addEventListener("click", handleTouch, false);	// works on Android, does not work on iOS
			displayMessage.addEventListener("click", handleTouch, false);	// works on Android and iPad
			displayMessage.innerHTML = "Touch to Start";
		}
		else {
			handleTouch(null);
		}
	}

	// launch the app inside of this scope
	function handleTouch(event) {
		displayMessage.removeEventListener("click", handleTouch, false);
		// launch the app by creating it
		var thisApp = new myNameSpace.MyApp();
	}

	// create a namespace for the application
	this.myNameSpace = this.myNameSpace || {};

	// this is a function closure
	(function () {
		// the application
		function MyApp() {
			this.init();
		}

		MyApp.prototype = {
			src: null,            // the audio src we are trying to play
			soundInstance: null,  // the soundInstance returned by Sound when we create or play a src
			displayStatus: null,  // the HTML element we use to display messages to the user
			loadProxy: null,

			init: function () {
				// store the DOM element so we do repeatedly pay the cost to look it up
				this.displayStatus = document.getElementById("status");

				// this does two things, it initializes the default plugins, and if that fails the if statement triggers and we display an error
				// NOTE that WebAudioPlugin plays an empty sound when initialized, which activates web audio on iOS if played inside of a function with a touch event in its callstack
				if (!createjs.Sound.initializeDefaultPlugins()) {
					document.getElementById("error").style.display = "block";
					document.getElementById("content").style.display = "none";
					return;
				}

				// Create a single item to load.
				var assetsPath = "../_assets/audio/";
				this.src = assetsPath + "M-GameBG.ogg";

				this.displayStatus.innerHTML = "Waiting for load to complete.";  // let the user know what's happening
				// NOTE createjs.proxy is used to apply scope so we stay within the touch scope, allowing sound to play on mobile devices
				this.loadProxy = createjs.proxy(this.handleLoad, this);
				createjs.Sound.alternateExtensions = ["mp3"];	// add other extensions to try loading if the src file extension is not supported
				createjs.Sound.addEventListener("fileload", this.loadProxy); // add event listener for when load is completed.
				createjs.Sound.registerSound(this.src);  // register sound, which preloads by default

				return this;
			},

			// play a sound inside
			handleLoad: function (event) {
				this.soundInstance = createjs.Sound.play(event.src);	// start playback and store the soundInstance we are currently playing
				this.displayStatus.innerHTML = "Playing source: " + event.src;  // let the user know what we are playing
				createjs.Sound.removeEventListener("fileload", this.loadProxy);	// we only load 1 sound, so remove the listener
			}
		}

		// add MyApp to myNameSpace
		myNameSpace.MyApp = MyApp;
	}());

</script>

</body>
</html>
